<template>
  <div class="content">
    <div class="title">
      <div class="op"></div>
      项目论证
    </div>
    <div class="formbox">
      <div class="form-1">
        <div class="module">一、项目研究目标及主要内容</div>
        <div class="form-content">
          <a-form :form="form" :label-col="{ span: 3 }" :wrapper-col="{ span: 23 }" labelAlign="left">
            <a-form-item>
              <div class="item-label">1、主要目标</div>
              <a-input type="textarea" v-decorator="['mainTarget', { rules: [{ message: '请输入主要目标' }] }]" />
            </a-form-item>
            <a-form-item>
              <div class="item-label">2、研究内容</div>
              <a-input type="textarea" v-decorator="['researchContent', { rules: [{ message: '请输入研究内容' }] }]" />
            </a-form-item>
            <div class="module-1">3、项目的关键技术</div>
            <a-form-item>
              <div class="item-label" style='margin-left: 8px;'>1) 技术难点</div>
              <a-input
                type="textarea"
                v-decorator="['technicalDifficulties', { rules: [{ message: '请输入技术难点' }] }]"
              />
            </a-form-item>
            <a-form-item>
              <div class="item-label" style='margin-left: 8px;'>2) 创新点</div>
              <a-input type="textarea" v-decorator="['innovation', { rules: [{ message: '请输入创新点' }] }]" />
            </a-form-item>
            <div class="module" style="border: none">二、项目内容（外委研究单独说明）</div>
            <div class="module-1">
              <p>1、分年度计划进度</p>
            </div>
            <div class="module-2">
              <p>1) 年度计划</p>
              <span @click="addObj('annual')"
                ><a href="javascript:;"><a-icon type="plus" />新增</a></span
              >
            </div>
            <a-form-item v-for="(item, index) in annualPlanList" :key="'annualPlanList' + index">
              <div class="item-label">{{ index + 1 }}、{{ item.label }}</div>
              <a-input type="textarea" v-decorator="['annualPlan' + index, { rules: [{ message: '请输入' }] }]" />
              <span class="del" @click="delObj('annual', index)">
                <a href="javascript:;"><a-icon type="delete" />删除</a>
              </span>
            </a-form-item>
            <div class="module-2">
              <p>2) 里程碑节点计划</p>
              <span @click="addObj('milestone')"
                ><a href="javascript:;"><a-icon type="plus" />新增</a></span
              >
            </div>
            <a-form-item v-for="(item, index) in milestoneList" :key="'milestoneList' + index">
              <div class="item-label">{{ index + 1 }}、{{ item.label }}</div>
              <a-input type="textarea" v-decorator="['milestone' + index, { rules: [{ message: '请输入' }] }]" />
              <span class="del" @click="delObj('milestone', index)">
                <a href="javascript:;"><a-icon type="delete" />删除</a>
              </span>
            </a-form-item>
            <div class="module-1">三、验收标准与技术指标</div>
            <div class="module-2" style='padding-left: 0'>
              <p>1、验收标准</p>
              <span @click="addObj('standard')"
                ><a href="javascript:;"><a-icon type="plus" />新增</a></span
              >
            </div>
            <a-form-item v-for="(item, index) in standardList" :key="'standardList' + index">
              <div class="item-label">{{ index + 1 }}) {{ item.label }}</div>
              <a-input type="textarea" v-decorator="['standard' + index, { rules: [{ message: '请输入' }] }]" />
              <span class="del" @click="delObj('standard', index)">
                <a href="javascript:;"><a-icon type="delete" />删除</a>
              </span>
            </a-form-item>
            <div class="module-2" style='padding-left: 0'>
              <p>2、技术指标</p>
              <span @click="addObj('target')"
                ><a href="javascript:;"><a-icon type="plus" />新增</a></span
              >
            </div>

            <a-form-item v-for="(item, index) in targetList" :key="'targetList' + index">
              <div class="item-label">{{ index + 1 }}) {{ item.label }}</div>
              <a-input type="textarea" v-decorator="['target' + index, { rules: [{ message: '请输入' }] }]" />
              <span class="del" @click="delObj('target', index)">
                <a href="javascript:;"><a-icon type="delete" />删除</a>
              </span>
            </a-form-item>
          </a-form>
        </div>
      </div>
      <div class="upload">
        <div class="module">文档上传</div>
        <div style="margin-top: 10px">
              <a-upload-dragger
               name="start"
               :multiple="true"
               :custom-request="customRequest"
               @change="handleChange"
              >
               <p class="ant-upload-drag-icon">
                <a-icon type="inbox" />
               </p>
               <p class="ant-upload-text">
                点击或将文件拖拽到这里上传
               </p>
               <p class="ant-upload-hint">
                支持扩展名：.rar .zip .doc .docx .pdf .jpg..
               </p>
              </a-upload-dragger>

        </div>
      </div>
    </div>
    <a-modal v-model="visible" :title="moduleTitle" @ok="handleOk">
      <a-input v-model="planTitle" placeholder="请输入项目名称"></a-input>
    </a-modal>
    <div class="btn" style='margin-bottom: 150px;'>
      <a-button @click="previous"> 上一步</a-button>
      <a-button type="primary" @click="save"> 保存</a-button>
    </div>
  </div>
</template>

<script>
import { updateDemon } from '@/api/projectInitApply'
import { upload } from '@/api/projectInitApply'
export default {
  props:{
    id:{
      default:null,
    }
  },
  data() {
    return {
      form: this.$form.createForm(this, { name: 'projectDemonstration' }),
      annualPlanList: [{ label: '2023年度计划' }, { label: '2024年度计划' }],
      milestoneList: [{ label: '节点' }, { label: '时间' }, { label: '备注' }],
      standardList: [{ label: '标准1' }, { label: '标准2' }],
      targetList: [{ label: '指标1' }, { label: '指标2' }],
      visible: false,
      planTitle: '',
      module: '',
      moduleTitle: '',
      fileId: '',
    }
  },
  methods: {
    // nextTab() {
    //   this.$emit('next', 0)
    // },
    // previous() {
    //   this.$emit('previous', 2)
    // },
    add() {
      alert('弹窗')
    },
    addObj(module) {
      this.visible = true
      this.module = module
      if (module == 'annual') {
        this.moduleTitle = '年度计划增加'
      } else if (module == 'milestone') {
        this.moduleTitle = '里程碑节点计划增加'
      } else if (module == 'standard') {
        this.moduleTitle = '验收标准增加'
      } else if (module == 'target') {
        this.moduleTitle = '技术指标增加'
      }
    },
    delObj(module, obj) {
      if (module == 'annual') {
        this.annualPlanList.splice(obj, 1)
      } else if (module == 'milestone') {
        this.milestoneList.splice(obj, 1)
      } else if (module == 'standard') {
        this.standardList.splice(obj, 1)
      } else if (module == 'target') {
        this.targetList.splice(obj, 1)
      }
    },
    handleOk() {
      if (this.module == 'annual') {
        this.annualPlanList.push({ label: this.planTitle })
      } else if (this.module == 'milestone') {
        this.milestoneList.push({ label: this.planTitle })
      } else if (this.module == 'standard') {
        this.standardList.push({ label: this.planTitle })
      } else if (this.module == 'target') {
        this.targetList.push({ label: this.planTitle })
      }

      this.visible = false
      this.planTitle = ''
    },
    nextTab() {
      this.$emit('next', 2)
    },
    previous() {
      this.$emit('previous', 0)
    },
    save(isTriggerExternal) {
      const fields = this.form.getFieldsValue()
      const keys = Object.keys(fields)
      console.log(fields)

      // 年度计划
      const pmDemonstrationYearProgressList = []
      // 技术指标
      const pmDemonstrationTechnicalIndicatorList = []
      // 里程碑节点计划
      const pmDemonstrationMilestoneList = []
      // 验收标准
      const pmDemonstrationAcceptanceCriteriaList = []

      const annualLabelList = this.annualPlanList.map((obj) => parseInt(obj.label))
      annualLabelList.forEach((label, index) => {
        pmDemonstrationYearProgressList.push({
          content: fields['annualPlan' + index],
          year: label,
          mainId: this.id,
        })
      })

      const mileStoneLabelList = this.milestoneList.map((obj) => obj.label)
      mileStoneLabelList.forEach((label, index) => {
        pmDemonstrationMilestoneList.push({
          content: fields['milestone' + index],
          nodeName: label,
          mainId: this.id,
        })
      })

      const standardLabelList = this.standardList.map((obj) => obj.label)
      standardLabelList.forEach((label, index) => {
        pmDemonstrationAcceptanceCriteriaList.push({
          content: fields['standard' + index],
          criteriaName: label,
          mainId: this.id,
        })
      })

      const targetLabelList = this.targetList.map((obj) => obj.label)
      targetLabelList.forEach((label, index) => {
        pmDemonstrationTechnicalIndicatorList.push({
          content: fields['standard' + index],
          indicatorName: label,
          mainId: this.id,
        })
      })
      this.id = !this.id?this.$route.query.id:this.id
      const reqBody = {
        file: this.fileId,
        innovation: fields.innovation,
        mainId: String(this.id),
        mainTarget: fields.mainTarget,
        researchContent: fields.researchContent,
        technicalDifficulties: fields.technicalDifficulties,
        pmDemonstrationAcceptanceCriteriaList,
        pmDemonstrationMilestoneList,
        pmDemonstrationTechnicalIndicatorList,
        pmDemonstrationYearProgressList,
      }
      updateDemon(reqBody).then((res) => {
        console.log(res)
        if (res) {
          this.$message.success('保存成功')
          this.$router.push({ path: '/initManage' })
        } else this.$message.success('保存失败')
      })
    },
    customRequest({ file, onSuccess, onError }) {
      const formData = new FormData()
      formData.append('file', file)
      // formData.append('path', file.name)
      upload(formData, {
        headers: {
          'Content-Type': 'multipart/form-data',
        },
      }).then((res) => {
        console.log(res)
        this.fileId = res.data
        onSuccess()
      })
    },
    handleChange(info) {
      const status = info.file.status
      if (status !== 'uploading') {
        console.log(info.file, info.fileList)
      }
      if (status === 'done') {
        this.$message.success(`${info.file.name} 上传成功`)
      } else if (status === 'error') {
        this.$message.error(`${info.file.name} 上传失败`)
      }
    },
  },
}
</script>

<style lang="less" scoped>
.btn {
  width: 100%;
  text-align: right;
}

::v-deep .ant-form-item .ant-form-item-children {
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: flex-start;

  .item-label {
    width: 100px;
    // white-space:pre;
    // word-wrap: normal;
  }

  .ant-input {
    flex: 1;
    margin-right: 5px;
  }
}

.del {
  a {
    color: red;
  }
}

.content {
  height: 100%;
  width: 100%;
  padding-left: 20px;
  padding-top: 10px;
  display: flex;
  flex-direction: column;

  .title {
    height: 30px;
    display: flex;
    align-items: center;

    // margin-left: -200px;
    .op {
      height: 20px;
      width: 5px;
      background: #0084ff;
      margin-right: 10px;
    }
  }

  .module {
    height: 35px;
    font-weight: 800;
    border-bottom: 1px solid #e9e9e9;
  }

  .formbox {
    width: 100%;
    min-height: 400px;
    display: flex;
    border-right: 1px solid #d3d3d3;

    .form-1 {
      min-height: 400px;
      width: 60%;
      border-right: 1px solid #d3d3d3;
      padding-right: 5px;

      .form-content {
        margin-top: 10px;

        .module-1 {
          height: 25px;
          border-bottom: 1px solid #e9e9e9;
          margin-bottom: 10px;
        }

        .module-2 {
          height: 25px;
          border-bottom: 1px solid #e9e9e9;
          margin-bottom: 10px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 0 12px;
        }
      }
    }

    .upload {
      flex: 1;
      margin-left: 5px;
    }
  }
}
</style>
